<template>
	<!-- pdf转图片 -->
	<view class="container">
		<view class="tip">说明: 请长按图片进行保存</view>
		<view id="listCanvas" class="listCanvas"></view>
		<img v-for="(item,i) in imgUrl" :key="i" :src="item" alt="" width="100%" height="auto" @click="getImgIndex(i)">
	</view>
</template>

<script>
	export default {
		name: 'pdfToImg',
		data() {
			return {
				imgUrl: [],
			};
		},
		props: {
			pdfStream: {
				type: String,
				default: ""
			},
			errorTip: {
				type: String,
				default: ""
			},
		},
		watch: {
			pdfStream: {
				handler(newVal) {
					if (newVal) {
						this.getPdfjs(newVal)
					}
				},
				immediate: true
			}
		},
		methods: {
			pdfCImg(pdfurl) {
				// 初始化 pdf.js
				pdfjsLib.GlobalWorkerOptions.workerSrc =
					'static/js/pdf.worker.min.js';
				// 加载 PDF 文件并渲染到 canvas 上
				const url = pdfurl;
				pdfjsLib.getDocument(url).promise.then(pdf => {
					// 获取pdf页数、执行次数
					let count = 1
					// 页数
					let pageNum = pdf.numPages;
					// console.log(pageNum)
					let myElement = document.getElementById('listCanvas');
					// 创建原生canvas元素（与uniapp的canvas不同）
					for (let i = 1; i <= pageNum; i++) {
						const canvas = document.createElement('canvas');
						canvas.setAttribute('style', 'height:0;width:0');
						myElement.appendChild(canvas);
					}
					// 用回调函数，防止page.render异步图片位置错乱
					let that = this
					// 获取设备信息
					const systemInfo = uni.getSystemInfoSync();
					// 获取屏幕宽度
					let screenWidth = systemInfo.windowWidth * 2;

					function pdfzh() {
						// 每页pdf对应一个画布
						const canvas = document.getElementsByTagName('canvas')[count - 1];
						pdf.getPage(count).then(page => {
							// 设置图片缩放大小、画布显示大小
							let scale = 1
							const viewport = page.getViewport({
								scale: scale
							});
							const context = canvas.getContext('2d');
							// 按比例缩小适应屏幕宽度：屏幕宽度/pdf宽度=缩放比例
							// viewport.width是pdf宽度
							// window.innerWidth是屏幕宽度
							const scaleBl = window.innerWidth / viewport.width
							const scaleV = page.getViewport({
								scale: scaleBl
							})
							canvas.width = scaleV.width
							canvas.height = scaleV.height
							// 成功渲染canvas回调
							page.render({
								canvasContext: context,
								viewport: scaleV
							}).promise.then(() => {
								// console.log("执行了")
								// 将 canvas 转换为图片格式（这里示例为 PNG）
								// 可以将 image 作为 URL 或 Base64 字符串使用，或者设置为 img 元素的 src 属性
								const image = canvas.toDataURL('image/png');
								// 路径、页签
								that.imgUrl.push(image)
								if (count == pageNum) {

								} else {
									count++;
									pdfzh()
								}
							});
						});
					}
					pdfzh()
				}).catch(res => {
					uni.showModal({
						title: '提示',
						content: this.errorTip,
						confirmColor: '#000000', //确定字体颜色
						showCancel: false, //没有取消按钮的弹框 
						buttonText: '确定',
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
				});
			},
			// 点击图片预览
			getImgIndex(index) {
				uni.previewImage({
					urls: this.imgUrl,
					current: index
				})
			},
			// pdfjs引入
			getPdfjs(res) {
				let that = this
				// 引入 jsPDF
				const script = document.createElement('script');
				script.src = 'static/js/pdf.min.js'; // jsPDF 文件的路径
				script.onload = function() {
					console.log('jsPDF 加载成功');
					// pdf转图片
				    res = new Uint8Array(res)
					that.pdfCImg(res)
				};
				script.onerror = function() {
					console.error('jsPDF 加载失败');
				};
				document.head.appendChild(script);
			}
		},
	};
</script>
<style>
	.tip {
		padding: 20rpx 10rpx;
		font-size: 30rpx;
		color: black;
	}

	.listCanvas {
		width: 0;
		height: 0;
	}
</style>